﻿@model HZY.Admin.Model.CodeGenerationModel
@{
    var className = Model.TableName;
    var ignores = new string[] { "Id", "CreateTime", "UpdateTime" };
    var tableInfos = Model.AppTableInfos
        .Where(w => !ignores.Contains(w.ColName))
        .ToList()
        ;
    var searchKeyWords = new[] { "Title", "Name", "Phone", "Address", "Email" };
    var searchKeyWord = string.Empty;
    foreach (var item in searchKeyWords)
    {
        if (tableInfos.Any(w => w.ColName == item))
        {
            searchKeyWord = item;
            break;
        }
    }
    if (string.IsNullOrWhiteSpace(searchKeyWord))
    {
        searchKeyWord = "请设置检索框";
    }
}

<pre>
@@section Styles{
    <style>
        body {
            background-color: #f0f2f5 !important;
        }
    </style>
}

@@section Scripts{
<input type="hidden" value='@@Html.Raw(ViewData["power"])' id="hidden_power" />

<input type="hidden" value='@@ViewData["isFindBack"]' id="hidden_isFindBack" />

<!--js service-->
<script type="text/javascript">
    var power = JSON.parse(document.getElementById('hidden_power').value);
    var isFindBack = document.getElementById('hidden_isFindBack').value;
    var app = new Vue({
        el: "#app",
        data: function () {
            return {
                power: power,
                prefix: "/Admin/@(className)",
                table: {
                    //检索
                    search: {
                        state: false,
                        vm: {
                            name: ""
                        },
                    },
                    rows: 10,
                    page: 1,
                    total: 0,
                    selectedRowKeys: [],
                    columns: [],
                    data: [],
                }
            }
        },
        created: function () {
            this.findList();
        },
        mounted: function () {

        },
        methods: {
            //重置检索条件
            onResetSearch() {
                let searchVm = this.table.search.vm;
                for (let key in searchVm) {
                    searchVm[key] = "";
                }
                this.findList();
            },
            //检索
            searchEvent: function () {
                this.table.page = 1;
                this.findList();
            },
            //获取列表数据
            findList() {
                this.table.loading = true;
                http.post(`${this.prefix}/findlist/${this.table.page}/${this.table.rows}`, this.table.search.vm)
                    .then((res) => {
                        let data = res.data;
                        this.table.loading = false;
                        this.table.page = data.page;
                        this.table.rows = data.size;
                        this.table.total = data.total;
                        this.table.columns = data.columns;
                        this.table.data = data.dataSource;
                    });
            },
            //删除数据
            deleteList(id) {
                let t = this;
                tools.confirm("确定要删除吗?", function () {
                    let ids = [];
                    if (id) {
                        ids.push(id);
                    } else {
                        ids = t.table.selectedRowKeys;
                    }
                    if (ids && ids.length === 0) {
                        return tools.message("请选择要删除的数据!", "警告");
                    }
                    http.post(`${t.prefix}/deleteList`, ids).then((res) => {
                        if (res.code != 1) return;
                        tools.message("删除成功!", "成功");
                        t.findList();
                    });
                });
            },
            //打开表单页面
            info(id) {
                let t = this;
                tools.pageOpen('编辑', `${this.prefix}/info/${id ? id : ''}`, function () {
                    t.findList();
                }, 600, 600);
            },
            //导出
            exportExcel() {
                http.download(`${this.prefix}/exportExcel`, this.table.search.vm);
            },
            //双击表格行
            row_dblclick: function (row, column, event) {
                if (isFindBack === '1') {
                    window.localStorage.setItem('findBack', JSON.stringify(row));
                    tools.getLayer().close(tools.getLayer().getFrameIndex(window.name));
                }
            }
        }
    });
</script>
}

<div id="app" v-cloak class="p-15">
    <el-collapse-transition>
        <el-card class="w100 mb-15" shadow="never" :body-style="{padding:0}" v-show="table.search.state">
            <el-row :gutter="15" class="p-15">
                <el-col :xs="24" :sm="12" :md="6" :lg="4" :xl="4" class="pb-15">
                    <el-input v-model="table.search.vm.@(searchKeyWord)" placeholder="@(searchKeyWord)" />
                </el-col>
                <!--button-->
                <el-col :xs="24" :sm="12" :md="6" :lg="6" :xl="6" style="float: right">
                    <el-button type="primary" @("@@")click="searchEvent">查询</el-button>
                    <el-button @("@@")click="onResetSearch">重置</el-button>
                </el-col>
            </el-row>
        </el-card>
    </el-collapse-transition>
    <el-card class="w100" shadow="never" :body-style="{padding:0}">
        <el-row :gutter="15" class="p-15 pb-0">
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb-15">
                <template v-if="power.search">
                    <el-button @("@@")click="table.search.state=!table.search.state">
                        <i class="el-icon-arrow-up" v-if="table.search.state"></i>
                        <i class="el-icon-arrow-down" v-else></i>
                        检索
                    </el-button>
                </template>
                <template v-if="power.insert">
                    <el-button type="primary" icon="el-icon-plus" @("@@")click="info()">
                        新建
                    </el-button>
                </template>
                <template v-if="power.delete">
                    <el-button type="danger" icon="el-icon-delete" @("@@")click="deleteList()">
                        批量删除
                    </el-button>
                </template>
            </el-col>
            <el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" class="pb-15 text-right">
                <el-dropdown>
                    <el-button icon="el-icon-arrow-down">
                        更多操作
                    </el-button>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item>
                            <span @("@@")click="exportExcel"> 导出 Excel</span>
                        </el-dropdown-item>
                        <el-dropdown-item>
                            <span @("@@")click="exportExcel"> 导出 Pdf</span>
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </el-col>
        </el-row>
        <el-table :data="table.data" row-key="id" @("@@")selection-change="(array)=>{table.selectedRowKeys=array;}" @("@@")row-dblclick="row_dblclick" size="medium">
            <el-table-column type="index" width="50" fixed></el-table-column>
            <el-table-column type="selection" width="50" fixed></el-table-column>
            <!--根据查询接口自动加载头部信息 start-->
            <el-table-column v-for="(item,index) in table.columns"
                             :prop="item.fieldName"
                             :label="item.title"
                             :key="index"
                             :width="item.width"
                             v-if="item.show">
            </el-table-column>
            <!--根据查询接口自动加载头部信息 end-->
            <el-table-column fixed="right" label="操作" width="100" v-if="power.update || power.delete">
                <template slot-scope="scope">
                    <el-link type="primary" @("@@")click="info(scope.row.id)" v-if="power.update">
                        编辑
                    </el-link>
                    <el-link type="danger" @("@@")click="deleteList(scope.row.id)" v-if="power.delete">
                        删除
                    </el-link>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination @("@@")size-change="(val)=>{table.rows=val;findList();}"
                       @("@@")current-change="(val)=>{table.page=val;findList();}" :current-page="table.page"
                       :page-sizes="[10, 15, 20, 50, 100, 200, 300, 400, 1000]" :page-size="table.rows"
                       layout="total, sizes, prev, pager, next, jumper" :total="table.total" class="mt-15 ml-15 mb-15">
        </el-pagination>
    </el-card>
</div>
</pre>